<template>
  <div class="worldBox">
    <div class="mapBox">
      <div
        v-for="item of worldData"
        :key="item.regionId"
        :class="'markBox ' + item.className"
        @click="toCountry(item)"
      >
        <!-- :style="{ left: item.left + 'px', top: item.top + 'px' }" -->
        <i class="circleRipple"></i>
        <i class="el-icon-location"></i>
        <p v-if="!isMobile">
          {{ $i18n.locale === "zh" ? item.cname : item.name }}
        </p>
      </div>
    </div>

    <!-- <div class="barBox">
        <p v-for="(item, index) in worldData" :key="index">
          <span>{{ item.count }}</span>
          <span>{{ item.name }}</span>
        </p>
        <i></i>
    </div>-->
  </div>
</template>

<script>
export default {
  props: {
    worldData: {
      type: Array,
    },
  },
  data() {
    return {
      mapLocation: [
        {
          cname: "南美",
          name: "South America",
          top: 283,
          left: 171,
          className: "areaTip005",
        },
        {
          cname: "西非",
          name: "West Africa",
          top: 194,
          left: 294,
          className: "areaTip011",
        },
        {
          cname: "中美",
          name: "Sino-American",
          top: 202,
          left: 87,
          className: "areaTip013",
        },
        {
          cname: "东非",
          name: "East Africa",
          top: 245,
          left: 419,
          className: "areaTip014",
        },
        {
          cname: "北非",
          name: "North Africa",
          top: 153,
          left: 362,
          className: "areaTip015",
        },
        {
          cname: "中非",
          name: "Central African",
          top: 237,
          left: 358,
          className: "areaTip017",
        },
        {
          cname: "南非",
          name: "South Africa",
          top: 321,
          left: 385,
          className: "areaTip018",
        },
        {
          cname: "北美",
          name: "North America",
          top: 92,
          left: 99,
          className: "areaTip021",
        },
        {
          cname: "加勒比地区",
          name: "Caribbean Region",
          top: 187,
          left: 128,
          className: "areaTip029",
        },
        {
          cname: "东亚",
          name: "East Asia",
          top: 132,
          left: 618,
          className: "areaTip030",
        },
        {
          cname: "南亚",
          name: "South Asia",
          top: 166,
          left: 529,
          className: "areaTip034",
        },
        {
          cname: "东南亚",
          name: "Southeast Asia",
          top: 249,
          left: 606,
          className: "areaTip035",
        },
        {
          cname: "南欧",
          name: "Southern Europe",
          top: 117,
          left: 306,
          className: "areaTip039",
        },
        {
          cname: "澳大利亚和新西兰",
          name: "Australia and New Zealand",
          top: 255,
          left: 717,
          className: "areaTip053",
        },
        {
          cname: "美拉尼西亚",
          name: "Melanesia",
          top: 328,
          left: 701,
          className: "areaTip054",
        },
        {
          cname: "玻里尼西亚",
          name: "Polynesia",
          top: 291,
          left: 799,
          className: "areaTip061",
        },
        {
          cname: "中亚",
          name: "Central Asia",
          top: 112,
          left: 494,
          className: "areaTip143",
        },
        {
          cname: "西亚",
          name: "West Asia",
          top: 146,
          left: 446,
          className: "areaTip145",
        },
        {
          cname: "东欧",
          name: "Eastern Europe",
          top: 88,
          left: 391,
          className: "areaTip151",
        },
        {
          cname: "北欧",
          name: "Northern Europe",
          top: 47,
          left: 356,
          className: "areaTip154",
        },
        {
          cname: "西欧",
          name: "Western Europe",
          top: 82,
          left: 324,
          className: "areaTip155",
        },
      ], //提前准备好的定位样式
    };
  },
  components: {},
  computed: {
    isMobile() {
      return this.$store.getters.isMobile;
    },
  },
  watch: {
    worldData(val) {
      return val.map((item) => {
        this.mapLocation.map((locate) => {
          if (item.cname === locate.cname) {
            if (this.isMobile) {
              Object.assign(item, {
                left: locate.left * 0.3125,
                top: locate.top * 0.3125,
                className: locate.className,
                name: locate.name,
              });
            } else {
              Object.assign(item, {
                left: locate.left,
                top: locate.top,
                className: locate.className,
                name: locate.name,
              });
            }
          }
        });
      });
    },
  },
  created() {},
  mounted() {
    // this.concatLocate();
  },
  methods: {
    /** 根据传来的数据 连接定位样式*/
    // concatLocate() {
    //   this.worldData.map((item) => {
    //     this.mapLocation.map((locate) => {
    //       if (item.cname === locate.cname) {
    //         Object.assign(item, { left: locate.left, top: locate.top });
    //       }
    //     });
    //   });
    // },
    // 跳转对应地区专辑
    toCountry(val) {
      this.$router.push({
        name: "nationalAreaList",
        params: {
          sort: "world",
          id: val.regionId,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.worldBox {
  // display: flex;
  // justify-content: space-between;
  // align-items: flex-end;
  // margin: 40px 0;
  .mapBox {
    // width: 834px;
    // height: 430px;
    width: 1200px;
    height: 620px;
    margin: 0 auto;
    position: relative;
    background-image: url(../../../assets/images/world.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    z-index: 1;
    .markBox {
      position: absolute;
      width: 12px;
      height: 12px;
      text-align: center;
      cursor: pointer;
      p {
        opacity: 0;
        position: relative;
        left: -47px;
        margin: 32px 0 0 0;
        width: 140px;
        padding: 4px 0;
        background: #fff;
        border-radius: 4px;
        color: #a1322c;
        font-weight: 500;
        box-shadow: 0 4px 20px -4px rgba(36, 57, 65, 0.4);
        transition: all 0.2s ease-out;
        &:after {
          position: absolute;
          top: -12px;
          left: 50%;
          margin-left: -3px;
          display: inline-block;
          content: "";
          border-width: 6px;
          border-style: solid;
          border-color: transparent transparent #fff transparent;
        }
      }
      i.el-icon-location {
        position: absolute;
        left: 50%;
        margin-left: 8px;
        font-size: 24px;
        color: #fff;
        text-shadow: 0 3px #a1322c;
        cursor: pointer;
      }
      &:hover {
        p {
          opacity: 1;
        }
      }
      &.areaTip035 {
        top: calc(359 / 620 * 100%);
        left: calc(872 / 1200 * 100%);
      }
      &.areaTip039 {
        top: calc(168 / 620 * 100%);
        left: calc(518 / 1200 * 100%);
      }
      &.areaTip061 {
        top: calc(412 / 620 * 100%);
        left: calc(1137 / 1200 * 100%);
      }
      &.areaTip018 {
        top: calc(321 / 620 * 100%);
        left: calc(554 / 1200 * 100%);
      }
      &.areaTip005 {
        top: calc(408 / 620 * 100%);
        left: calc(246 / 1200 * 100%);
      }
      &.areaTip034 {
        top: calc(239 / 620 * 100%);
        left: calc(761 / 1200 * 100%);
      }
      &.areaTip054 {
        top: calc(473 / 620 * 100%);
        left: calc(1008 / 1200 * 100%);
      }
      &.areaTip015 {
        top: calc(220 / 620 * 100%);
        left: calc(520 / 1200 * 100%);
      }
      &.areaTip154 {
        top: calc(68 / 620 * 100%);
        left: calc(512 / 1200 * 100%);
      }
      &.areaTip145 {
        top: calc(210 / 620 * 100%);
        left: calc(670 / 1200 * 100%);
      }
      &.areaTip151 {
        top: calc(127 / 620 * 100%);
        left: calc(562 / 1200 * 100%);
      }
      &.areaTip011 {
        top: calc(289 / 620 * 100%);
        left: calc(423 / 1200 * 100%);
      }
      &.areaTip017 {
        top: calc(341 / 620 * 100%);
        left: calc(515 / 1200 * 100%);
      }
      &.areaTip143 {
        top: calc(161 / 620 * 100%);
        left: calc(711 / 1200 * 100%);
      }
      &.areaTip030 {
        top: calc(190 / 620 * 100%);
        left: calc(889 / 1200 * 100%);
      }
      &.areaTip021 {
        top: calc(132 / 620 * 100%);
        left: calc(142 / 1200 * 100%);
      }
      &.areaTip053 {
        top: calc(367 / 620 * 100%);
        left: calc(1031 / 1200 * 100%);
      }
      &.areaTip155 {
        top: calc(118 / 620 * 100%);
        left: calc(466 / 1200 * 100%);
      }
      &.areaTip014 {
        top: calc(353 / 620 * 100%);
        left: calc(603 / 1200 * 100%);
      }
      &.areaTip013 {
        top: calc(291 / 620 * 100%);
        left: calc(125 / 1200 * 100%);
      }
      &.areaTip029 {
        top: calc(269 / 620 * 100%);
        left: calc(184 / 1200 * 100%);
      }
    }
  }
}
/* 圆圈荡漾 circleRipple*/
.circleRipple {
  position: absolute;
  display: block;
  width: 14px;
  height: 14px;
  /*background: #e8f6fd;*/
  border-radius: 50%;
  margin-top: 14px;
  &:after {
    content: ""; /* 注：before,after伪类必须加 content:'';*/
    position: absolute;
    width: 30px;
    height: 30px;
    left: 10px;
    top: -6px;
    border: 4px solid #a1322c;
    border-radius: 30px;
    // z-index: 2;
    opacity: 0;
    -webkit-animation: ripple 3s ease-out infinite;
    -moz-animation: ripple 3s ease-out infinite;
    animation: ripple 3s ease-out infinite;
  }
}
/* 荡漾动画 ripple*/
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(0);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@-webkit-keyframes ripple {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  25% {
    -webkit-transform: scale(0);
    opacity: 0.1;
  }
  50% {
    -webkit-transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    -webkit-transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}
</style>
